<template>
	<view class="new_fllow">
		<view class="fllow_form">
			<view style="width: 100px;"><text>*</text>姓名</view>
			<view class="form_input">
				<input type="text" v-model="name"  
					placeholder-style="font-size:30rpx;color: #999;" placeholder="请输入姓名" class="">
			</view> 
			<view class="form_right theme">
				<view @click="searchType"  style="width: 40px;" class="iconfont icon-arrows_right"></view>
			</view> 
		</view> 
		<view class="fllow_form">
			<view style="width: 100px;">电话</view>
			<view class="form_input">
				<input type="text" v-model="phone"  
					placeholder-style="font-size:30rpx;color: #999;" placeholder="请输入电话" class="">
			</view>  
		</view>  
		<view class="fllow_form">
			<view style="width: 100px;">预约日期</view>
			<picker mode="date" fields="day" @change="changeDataTime">
				<view class="form_right">
					<view :class="useday ? 'valueActive' : '' ">{{useday ? useday : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker> 
		</view>
		<view class="fllow_form">
			<view style="width: 100px;">开始时间</view>
			<!-- #ifdef MP-WEIXIN || H5 || APP-PLUS-->
			<picker style="width: 100px;" @change="changeTime" mode="time" :start="startTime" :end="endTime" :value="timeArr[0]">
				<view class="form_right">
					<view :class="timeArr[0] ? 'valueActive' : '' ">{{timeArr[0] ? timeArr[0] : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<picker @change="changeAlipayTime"  @change="changeTime" mode="time"  :start="startTime" :end="endTime" :value="timeArr[0]">
				<view class="form_right">
					<view :class="timeArr[0] ? 'valueActive' : '' ">{{timeArr[0] ? timeArr[0] : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
		</view>
		<view class="fllow_form">
			<view style="width: 100px;">结束时间</view>
			<!-- #ifdef MP-WEIXIN || H5 || APP-PLUS-->
			<picker style="width: 100px;"  @change="changeTime2" mode="time"  :start="startTime" :end="endTime" :value="timeArr[1]">
				<view class="form_right">
					<view :class="timeArr[1] ? 'valueActive' : '' ">{{timeArr[1] ? timeArr[1] : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<picker @change="changeAlipayTime"  @change="changeTime2" mode="time"  :start="startTime" :end="endTime" :value="timeArr[1]">
				<view class="form_right">
					<view :class="timeArr[1] ? 'valueActive' : '' ">{{timeArr[1] ? timeArr[1] : '点击选择'}}</view>
					<view class="iconfont icon-arrows_right"></view>
				</view>
			</picker>
			<!-- #endif -->
		</view>
		<view class="fllow_form">
			<view>预约员工</view>
			<view class="form_right theme">
				<view>{{staffName}}</view>
				<view @click="toSelectStaff" class="iconfont icon-arrows_right"></view>
			</view>
		</view>  
		<view class="fllow_form">
			<view>预约项目</view>
			<view class="form_right theme">
				<view>{{goodsName}}</view>
				<view @click="showGoods" class="iconfont icon-arrows_right"></view>
			</view>
		</view>   
		<view class="fllow_area">
			<view class="area_head">备注</view>
			<textarea :value="remarks" :class="remarks ? 'valueActive' : '' " @input="changeContent" placeholder="留个话" placeholder-style="color:#999" />
		</view>   
		<view class="bot_btn"  v-if="id > 0">
			  <view class="submit " v-if="status == 0 || status == 1 || status == 10 || status == 11  || status == 13" @click="$noMultipleClicks(saveAppoint, 1)" >审核/修改</view>
			  <view class="btnself " v-if="status == 1"  @click="$noMultipleClicks(saveAppoint, 2)" >到店</view>
			  <view class="btnself " v-if="status == 1 || status == 2 "  @click="toCashier" >开单收银</view>
			  <view class="btnself " v-if="status == 1 || status == 2  || status == 3"  @click="$noMultipleClicks(saveAppoint, 6)" >完成服务</view>
			  <view class="btnself bg " v-if="status == 1 || status == 11"  @click="$noMultipleClicks(saveAppoint, 13)">取消预约</view>
		</view> 
		
		<view id="btn" v-else class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(saveAppoint)">
			保存
		</view>
		<view class="botsec"></view>
		
	</view>
</template>

<script> 
	import {
		netSelect, 
		netKehuDetail,
		netAppointDetail,
		netUpdateAppoint,
		getServicetimelist,
		netAddAppoint
		
	} from '@/api/kehu.js'
	import {
		netGoodsDetail
	} from '@/api/main.js'
	
	import { netStaffDetail, netStaffofCustomerList, netStaffAchievement, netDisableAccount } from '@/api/index.js'
	
	import {
		BASE_URL,
		SIGN_NO
	} from '@/util/api.js'
	import {
		getNowData,
		getNowDay
	} from '@/util/weekTime.js'
	import {
		dateTimePicker,
		getMonthDay
	} from '@/util/dateTimePicker.js'
	import { netStaffDefaultReviewer } from '@/api/index.js'
	import { BASE_IMG_URL } from '@/util/api.js'
	import { commonF } from '@/common/common'
	import {
		pageJumps,
		statisticalPageJumps,
		customerPageJumps
	} from "@/pagesA/crm/crm_page_jumps.js";
	export default {
		mixins: [commonF, pageJumps, statisticalPageJumps, customerPageJumps],
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				noClick:true,    //防止  重复点击
				
				times:[],
				dateTimeArray:[],
				dateArr:[],
				hmArr:[],
				hmTime:[],
				id: '',
				status: '',
				storeName: '' ,
				store_id: '' ,
				member_id: '',
				name: '',
				goods_id: '', 
				goodsName: '',
				service_time_length: '',
				useday: getNowData().substr(0, 10),
				usetime: '',
				usetime2: '',
				timeArr: ['10:00', '11:00'],
				user_id: '', 
				room_id: '',
				staffName: '', 
				roomName: '',
				phone: '',
				remarks: '',
				startTime: '10:00',
				endTime: '19:00',
			}
		},
		onLoad(options) {
					let that = this
			console.log("==========123") 
			if(options.member_id) {
			    uni.setStorageSync('__memberId', options.member_id)
				this.member_id = options.member_id
			}
			if(options.usetime) {
				this.usetime = options.usetime
			    uni.setStorageSync('__usetime', options.usetime)
			}
			if(options.storeid) {
				this.store_id = options.storeid
			}
			if(options.id) {
				this.id = options.id
			}
			
			that.getTimes();
			this.initTime() 
		},
		onShow() { 
			let member_id = this.getDefaultMemberId()
			if(member_id) {
				this.member_id = member_id
			}
			let __usetime = uni.getStorageSync('__usetime')
			if(__usetime) { 
				this.usetime = __usetime
			}
			let goods_id = uni.getStorageSync('__goodsId')
			if(goods_id) {
				this.goods_id = goods_id
			}
			let user_id = uni.getStorageSync('__staffId')
			if(user_id) {
				this.user_id = user_id
			}
			
			this.getInfo()
		},
		//监听  页面 卸载
		onUnload() {
			console.log("unload...............*------00000000000000000")
			uni.removeStorageSync('__memberId')
			uni.removeStorageSync('__goodsId')
			uni.removeStorageSync('__staffId')
			uni.removeStorageSync('__usetime')
		},
		methods: {
			changeDataTime(e) {
				this.useday = e.detail.value 
			},
			toSelectStaff() {
				uni.navigateTo({
					url: '/pagesA/crm/selectStaff/selectStaff'
				})
			},
			showGoods() {
				uni.navigateTo({
					url: '/pagesA/crm/cashier/goods_select?isAppoint=1'
				})
			},
			searchType() {
			  uni.navigateTo({
			  	url:'/pagesA/crm/search/searchList?type=2'
			  })
			}, 
			initTime() {
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker()
				// 精确到分的处理，将数组的秒去掉
				let lastArray = obj.dateTimeArray.pop();
				let lastTime = obj.dateTime.pop();
				let lastDate = obj.dateArray.pop()

				this.dateTimeArray = obj.dateTimeArray
				this.dateTime = obj.dateTime
				this.dateArr = obj.dateArray
				
				let mArr = obj.dateArray.pop()
				let hArr = obj.dateArray.pop()
				this.hmArr = [hArr, mArr]
				this.hmTime = [obj.dateTime[3], obj.dateTime[4]]
				
			},
			//开始时间
			changeTime(e) {
				let arr = e.detail.value
				// let str = this.handleTime(arr)
				this.timeArr = [arr, this.timeArr[1]]
			},
			//开始时间
			changeTime2(e) {
				let arr = e.detail.value
				// let str = this.handleTime(arr)
				this.timeArr = [this.timeArr[0], arr]
			},
			changeAlipayTime(e) {
				this.usetime = e.detail.value
			},
			handleTime(arr) {
				let year = this.dateArr[0][arr[0]]
				let month = this.dateArr[1][arr[1]]
				let day = this.dateArr[2][arr[2]]
				let hour = this.dateArr[3][arr[3]]
				let minu = this.dateArr[4][arr[4]]
				let str = year + '-' + month + '-' + day +' '+hour+':'+minu
				return str
			}, 
			changeContent(e) {
				this.remarks = e.detail.value
			},
			  
			//跟进时间
			changeFollowTime(e) {
				this.start_time = e.detail.value[0] + '/' + e.detail.value[1] + '/' + e.detail.value[2]
			}, 
			getTimes: function() {
				var that = this; 
				let params = {
					day: that.day
				}
				getServicetimelist().then(res => {
					that.times = res.data 
					if(that.times.length > 1) {
						that.startTime = that.times[0]
						that.endTime = that.times[that.times.length -1 ]
					}
				})
			},
			setAppoTimes() {
					let that = this
					if(that.usetime) {
						that.useday = that.usetime.split(" ")[0]
						let hmstart =  that.usetime.split(" ")[1];
						let hmend =  that.usetime2.split(" ")[1];
						that.$set(this, 'timeArr', [hmstart, hmend])
					}
				},
				getInfo() {
					let that = this
					if(this.id) {
						netAppointDetail({
							id: this.id
						}).then(res => {
							let appo = res.data
							that.usetime= appo.use_time;       
							that.remarks= appo.remarks;        
							that.status = appo.status;      
							that.name= appo.name;      
							that.phone = appo.phone; 
							that.room_id = appo.room_id;  
							that.usetime = appo.use_time;  
							that.usetime2 = appo.use_time2;  
							that.setAppoTimes()
							
							if(appo.room) {
								that.room_id= appo.room.id;       
							}
							if(appo.goods) {
								that.goods_id= appo.goods.id;       
								that.goodsName= appo.goods.goods_name;       
							}
							if(appo.user) {
								that.user_id= appo.user.id;       
								that.staffName= appo.user.trueName;       
							}
						})
					} else {
	
						if(that.usetime) {
							that.useday = that.usetime.split(" ")[0]
							let hmstart =  that.usetime.split(" ")[1];
							let hmend =  that.afterTime(that.usetime, 60)//默认60分钟时长
							that.$set(this, 'timeArr', [hmstart, hmend])
						}  
						if(this.member_id) {
							netKehuDetail({
								id: this.member_id
							}).then(res => {
								let info = res.data
								this.name = info.memberName
								this.phone = info.orig_phone
							})
						} 
						if(this.goods_id) {
							netGoodsDetail({
								id: this.goods_id
							}).then(res => {
								let info = res.data
								this.goodsName = info.goods_name
							})
						}
						if(this.user_id) {
							netStaffDetail({id:this.user_id}).then(res=>{
								let info = res.data
								this.staffName = info.trueName
							})
						}
					}
					
				},
			afterTime: function(thisTime, duration){ 
				var that = this;
				  var now = new Date(thisTime).getTime();
				  var timearr = now + 1000*60*duration;
				  var d = new Date(timearr)//转换回原来的时间格式
				  let theDate = d.getDate();
				  let theHours = d.getHours();//取出时
				  let theMinutes = d.getMinutes()//取出分
				 //如果时间数值小于10，则在前面补上0
				  if (theHours < 10) {
					theHours = '0' + theHours
				  }
				  if (theMinutes < 10) {
					theMinutes = '0' + theMinutes
				  }
				  return theHours+':'+theMinutes//最后输出时间15:30 
			}, 
	 
			getRoomList: function() {
				  var that = this; 
				  roomStatusList({ currentPage: 1, pageSize: 999}).then(data => {
					that.roomList = data.list
				  }) 
		    },   
	
		   getStafflist() {
				netGetSelectStaff().then(res => {
					this.staffList = res
				})
			},
			openGoodsSelect: function(type) {  ///获取主卡数据
				var that = this;
				this.$modalGoodsSelector(function(goodsincart) {
						for (var i = 0; i <  goodsincart.length; i++) {
						var row =  goodsincart[i];
						that.goods_id = row.goods.id;  
						that.goodsName = row.goods.goods_name;  
						}
							}, type) 
			 },
			 showMemberSel: function() {
				  var that = this;   
				  this.$modalMemberSelector(function(staffObjs) {
							let item = staffObjs[0];
							that.member_id = item.id 
							that.name = item.memberName 
							that.phone = item.orig_phone 
							 
						},'',[]) 
			  },
	
			 toCashier() {
	
				  var that = this; 
				  this.toConsume(this.id)
				  
			  }, 
			 saveAppoint(handleStatus) {
				console.log('保存') 
				if (!this.useday || this.timeArr.length != 2) { 
					uni.showToast({
						title: '请设置到店时间',
						icon: 'none',
						duration: 2000
					})
					return
				}   
				 
				this.usetime = this.useday + " " + this.timeArr[0];
				this.usetime2 = this.useday + " " + this.timeArr[1];
				let {
					id,
					storeName ,
					store_id ,
					status ,
					member_id,
					name,
					goods_id,
					goodsName,
					service_time_length,
					usetime,
					usetime2,
					user_id,
					room_id,
					staffName,
					roomName,
					phone,
					remarks
				} = this
				 if (!name) {
					uni.showToast({
						title: '请选择或填写客人名字',
						icon: 'none',
						duration: 2000
					})
					return
				 }
				
				let params = {} 
				{
					//联系人
					params = {
						id,
						storeName ,
						status ,
						store_id ,
						member_id,
						name,
						goods_id,
						goodsName,
						service_time_length,
						usetime,
						usetime2,
						user_id,
						room_id,
						staffName,
						roomName,
						phone,
						remarks
					}
				}
				
				
				if(handleStatus) {
					params.status = handleStatus
				}
				if(this.id) {
					netUpdateAppoint(params).then(res => {
						uni.showToast({
							title: '更新预约成功',
							icon: 'none',
							duration: 2000
						})
						uni.removeStorageSync('__memberId')
						uni.removeStorageSync('__goodsId')
						uni.removeStorageSync('__staffId')
						uni.removeStorageSync('__usetime')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesA/crm/appoint/center'
							})
						}, 2000)
					})
				} else {
					netAddAppoint(params).then(res => {
						uni.showToast({
							title: '创建预约成功',
							icon: 'none',
							duration: 2000
						})
						uni.removeStorageSync('__memberId')
						uni.removeStorageSync('__goodsId')
						uni.removeStorageSync('__staffId')
						uni.removeStorageSync('__usetime')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pagesA/crm/appoint/center'
							})
						}, 2000)
					})
				} 
				
			}
			
		}
	}
</script>

<style lang="scss">
	.valueActive{
		color:#333;
	}
	
	
	.bot_btn { 
		background: #fff;
		width: 750rpx;
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1rpx solid #EAEAEA;
		z-index: 2;
	
		.btnself {
			width: 220rpx;
			height: 70rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			line-height: 70rpx;
			margin-right: 24rpx;
			background: #03aa96;
		}
	
		.bg {
			background: #ff7800;
		}
	}
	
	// 目标模块
	.submit {
		width: 220rpx;
		height: 70rpx;
		border-radius: 40rpx;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		line-height: 70rpx;
		background: #03aa96;
		margin-right: 24rpx;
	}
	.new_fllow {
		margin-top: 40rpx;
		font-size: 28rpx;

		.fllow_form {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 30rpx 40rpx 30rpx 47rpx;
			font-size: 32rpx;
			color: #999999;
			.form_right {
				display: flex;
				align-items: center;
				color: #999;
				:first-child{
					width:350rpx;
					text-align: right;
				}
				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}
			}

			text {
				color: #f00;
				margin-left: 10rpx;
			}

			.form_input {
				input { 
					text-align: right;
					margin-right: 10rpx;
				}
			}

			.fllow_button {
				margin-top: 15rpx;
			}
		}

		.fllow_file_li {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;

			.fil_li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;

				.fileimg {
					width: 20rpx;
					height: 20rpx;
				}

				.filename {
					font-size: 24rpx;
					color: #999999;
				}

				.closeimg {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.imglist {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.imgbox {
				width: 160rpx;
				height: 160rpx;
				margin-right: 14rpx;
				position: relative;
				margin-bottom: 24rpx;
				border: 1rpx solid #EAEAEA;

				.delimg {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					position: absolute;
					right: -16rpx;
					top: -16rpx;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
				}

				.selfimg {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}

		.fllow_area {
			background-color: #fff;
			padding: 0 55rpx;
			margin-bottom: 30rpx;
			font-size: 32rpx;
			color: #999999;
			padding-bottom: 30rpx;
			.area_head {
				height: 100rpx;
				line-height: 100rpx;

				text {
					color: #f00;
				}
			}

			textarea {
				height: 300rpx;
				padding: 30rpx;
				background: #f8f8f8;
				border-radius: 15rpx;
				margin: 0 auto;
			}
		}
		.follow_task {
			height: 80rpx;
			line-height: 80rpx;
		}
		#btn{
			width: 500rpx;
			height: 88rpx;
			background: #03AA96;
			border-radius: 29rpx;
			font-size: 34rpx;
			color: #fff;
			line-height: 88rpx;
		}
		
	}
</style>
